<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" isErrorPage="false" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/personal.css" rel="stylesheet">

    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>

</head>
<body>
<div class="header_top">

    <div class="header_bg">
        <!--   logo===========================================================================     -->
        <div class="header_left">
            <a href="../websocket/index.jsp">
                <img src="../images/logo.png"/>
            </a>

        </div>

        <div class="header_bottom">

            <div class="header_bottom_left">
                <a href="../websocket/index.jsp">首页</a>
                <a href="../news/news.jsp" class="mynews">消息</a>
            </div>

            <div class="header_bottom_search">

                <input class="searchname" value="狗粮" type="text" name=""/>

                <button class="searchbtn" value="">搜索</button>
            </div>

        </div>

        <div class="header_right">
            <a href="../shopping_cart/shoppingCart.jsp">
                <img src="../images/shoppingCar.png"/>
            </a>

        </div>

    </div>

</div>

<div class="main">

    <div class="main_bg">

        <div class="menu_left">


            <div style=""></div>
            <a href="../personal/personal.jsp" class="menu_left_personmsg redstyle">个人信息</a>
            <a href="../mycollect/mycollect.jsp" class="menu_left_collect">我的收藏</a>
            <a href="../myadress/myadress.jsp" class="menu_left_adress">收货地址</a>
            <a href="../myorders/myorders.jsp" class="menu_left_order">我的订单</a>
            <a href="../myreview/myreview.jsp" class="menu_left_myreview">我的评价</a>
            <a href="../mycoupon/mycoupon.jsp" class="menu_left_mycoupon">我的优惠券</a>

        </div>


        <!--我的消息-->
        <div class="mynews_bg" style="display: block">

            <h3 class="margin-left20">我的消息</h3>

            <div class="mycollect_selectall">
                <input type="checkbox" name="" class=""/>
                <span class="selectall_span">全选</span>
                <input type="button" name="" value="删除" class="margin-left60">
            </div>


            <div class="mynews">
                <table>
                    <tr>

                        <td width="50px" align="center" valign="top">
                            <input type="checkbox" name="" class=""/>
                        </td>

                        <td width="800px">
                            <span id="title" class="news_title">系统消息：</span>

                            <button class="showandhidden">展开</button>

                            <div class="mynews_cuopon">
                                <span class="mynews_cuopon_span" id="mynews_span">
                                    恭喜你获得了一张优惠券，
                                    <a href="">立即使用</a>
                                </span>
                            </div>

                        </td>

                    </tr>
                </table>

            </div>


            <div class="mycollect_selectall ">
                <input type="checkbox" name="" class=""/>
                <span class="selectall_span">全选</span>
                <input type="button" name="" value="删除" class="margin-left60">
            </div>

        </div>


    </div>

</div>

<script>
    var websocket = null;
    if('WebSocket' in window) {
        websocket = new WebSocket('ws://localhost:8080/ccyd/webSocket');
    }else {
        alert('该浏览器不支持websocket!');
    }

    websocket.onopen = function (event) {
        console.log('建立连接');
    }

    websocket.onclose = function (event) {
        console.log('连接关闭');
    }

    websocket.onmessage = function (event) {
        console.log(event);
        console.log('收到消息:' + event.data);
        setMessageInnerHTML(event.data);
    }

    websocket.onerror = function () {
        alert('websocket通信发生错误！');
    }
    //测试




    function  setMessageInnerHTML(innerHTML){
        document.getElementById('title').innerHTML += innerHTML +'<br>';
        // document.getElementById('mynews_span').innerHTML = ;
    }

    window.onbeforeunload = function () {
        websocket.close();
    }

</script>

<script src="${pageContext.request.contextPath}/js/personal.js"></script>
</body>
</html>
